<template>
  <div class="posttable">
    <el-row>
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;">
        <div class="addform addForm" v-if="form">
          <el-form label-position="top" ref="form" :model="form" :rules="rules">
            <el-row class="change">
              <el-col :span="5">
                <el-form-item label="姓名" prop="name">
                  <el-select
                    v-model.trim="form.name"
                    filterable
                    allow-create
                    default-first-option
                    clearable
                    @change="test"
                    placeholder="请输入或者选择姓名">
                    <el-option
                      v-for="(item,index) in options"
                      :key="index"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option v-for="(item,index) in sexlist" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="联系方式" prop="phone">
                  <el-input placeholder="请输入联系方式" v-model.trim="form.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="customer" label="客户" style="margin-bottom: 10px;">
                  <el-select v-model="form.customer" placeholder="请选择客户名称" style="width: 274px" @change="postHandler">
                    <el-option v-for="(item,index) in customerNames" :key="index" :label="item.name"
                               :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="职位" prop="position">
                  <el-select v-model="form.position" placeholder="请选择职位" @change="postNameChange">
                    <el-option v-for="(item,index) in positionlist" :key="index" :label="item"
                               :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="级别" prop="level">
                  <el-select v-model="form.level" placeholder="请选择级别">
                    <el-option v-for="(item,index) in levellist" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="入职时间" prop="entryTime">
                  <el-date-picker
                    v-model="form.entryTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择入职时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="进场时间" prop="admissionTime">
                  <el-date-picker
                    v-model="form.admissionTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择进场时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="退场时间" prop="depatureTime">
                  <el-date-picker
                    v-model="form.depatureTime"
                    type="date"
                    placeholder="请选择退场时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="推送时间" prop="pushTime">
                  <el-date-picker
                    v-model="form.pushTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择推送时间">
                  </el-date-picker>
                  <!--:picker-options="pickerOptions"-->
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="是否自带电脑" prop="isOwnComputer">
                  <el-select v-model="form.isOwnComputer" placeholder="请选择是否">
                    <el-option v-for="(item,index) in cpulist" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="二级部门" prop="secondDep">
                  <el-input v-model.trim="form.secondDep" placeholder="请输入二级部门">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="项目" prop="project">
                  <el-input v-model.trim="form.project" placeholder="请输入项目名称">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="项目负责人" prop="projectCharger">
                  <el-input v-model.trim="form.projectCharger" placeholder="请输入项目负责人姓名">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="销售负责人" prop="saleCharger">
                  <el-input v-model.trim="form.saleCharger" placeholder="请输入销售负责人姓名">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="remark" label="备注" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.remark" placeholder="请输入备注" style="width: 274px">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item style="margin-top: 20px;">
              <el-button class="save" :disabled="savedis" @click="submitForm('form')">保存</el-button>
              <el-button class="canceL" @click="cancel('form')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="errorinfoClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">{{errorinfo}}!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="errorinfoClose">确 定</el-button>
    <el-button round @click="errorinfoClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from 'axios'
  
  export default {
    name: "newdepartures",
    data() {
      return {
        customerNames: [],
        sexlist: ['男', '女'],
        positionlist: [],
        levellist: [],
        areallist: [],
        savedis: false,
        cpulist: ['是', '否'],
        form: {
          name: '',
          sex: '男',
          phone: '',
          customer: '',
          position: '',
          level: '',
          entryTime: moment(new Date()).format('YYYY-MM-DD'),
          admissionTime: moment(new Date()).format('YYYY-MM-DD'),
          depatureTime: moment(new Date()).format('YYYY-MM-DD'),
          pushTime: moment(new Date()).format('YYYY-MM-DD'),
          isOwnComputer: '否',
          secondDep: '',
          project: '',
          projectCharger: '',
          saleCharger: '',
          remark: '',
          state: '离职'
        },
        rules: {
          'customer': [
            {required: true, message: '请选择客户姓名', trigger: 'change'}
          ],
          'name': [
            {required: true, message: '请输入或者选择姓名', trigger: 'change'}
          ],
          'sex': [
            {required: true, message: '请选择性别', trigger: 'blur'}
          ],
          'phone': [
            {pattern: /(^0\d{2,4}\-\d{7,8}$)|(^1[3|4|5|6|7|8|9][0-9]{9}$)/, message: '请输入正确的联系方式', trigger: 'blur'}
          ],
          'projectCharger': [
            {
              pattern: /^[\u4e00-\u9fa5]*$/, message: '项目责任人的名称为汉字', trigger: 'blur'
            }
          ],
          'saleCharger': [
            {
              pattern: /^[\u4e00-\u9fa5]*$/, message: '销售责任人的名称为汉字', trigger: 'blur'
            }
          ],
          'pushTime': [
            {required: true, message: '请选择推送时间', trigger: 'blur'}
          ],
        },
        errordialogVisible: false,
        errorinfo: null,
        options: [],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        }
      }
    },
    created() {
      //获取客户名称下拉框数据
      axios.post(this.url + '/resumeUpload/getCustomerNames').then(res => {
        this.unlogin(res.data.code)
        if (res.data.code == 200) {
          this.customerNames = res.data.data;
        }
      });
      this.getPersonnel();
    },
    methods: {
      getPersonnel() {
        axios.get(this.url + "/statistics/entry/getPersonnel").then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.options = res.data.data;
          }
        });
      },
      //选择客户名称获取职位名称的下拉框数据
      postHandler() {
        this.cusId = '';
        for (var i = 0; i < this.customerNames.length; i++) {
          if (this.form.customer == this.customerNames[i].name) {
            this.cusId = this.customerNames[i].id
          }
        }
        this.form.position = '';
        this.form.level = '';
        this.levellist = [];
        this.positionlist = [];
        axios.post(this.url + "/demand/getPostNameByCustomerId", {
          customerId: this.cusId + ""
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.positionlist = res.data.data;
          }
        });
      },
      //获取级别的下拉框数据
      postNameChange() {
        this.form.level = '';
        this.levellist = [];
        axios.post(this.url + "/demand/getPostLevelByNameAndCustomerId", {
          postName: this.form.position,
          customerId: this.cusId + ""
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.levellist = res.data.data;
          }
        });
      },
      //选择客户名称获取职位名称的下拉框数据
      postHandler1() {
        this.cusId = '';
        for (var i = 0; i < this.customerNames.length; i++) {
          if (this.form.customer == this.customerNames[i].name) {
            this.cusId = this.customerNames[i].id
          }
        }
        this.levellist = [];
        this.positionlist = [];
        axios.post(this.url + "/demand/getPostNameByCustomerId", {
          customerId: this.cusId + ""
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.positionlist = res.data.data;
          }
        });
      },
      //获取级别的下拉框数据
      postNameChange1() {
        this.levellist = [];
        axios.post(this.url + "/demand/getPostLevelByNameAndCustomerId", {
          postName: this.form.position,
          customerId: this.cusId + ""
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.levellist = res.data.data;
          }
        });
      },
      initdata() {
        this.form = {
          name: '',
          sex: '男',
          phone: '',
          customer: '',
          position: '',
          level: '',
          entryTime: moment(new Date()).format('YYYY-MM-DD'),
          admissionTime: moment(new Date()).format('YYYY-MM-DD'),
          depatureTime: moment(new Date()).format('YYYY-MM-DD'),
          pushTime: moment(new Date()).format('YYYY-MM-DD'),
          isOwnComputer: '否',
          secondDep: '',
          project: '',
          projectCharger: '',
          saleCharger: '',
          remark: '',
          state: '离职'
        };
        this.savedis = false;
        this.options = [];
        this.getPersonnel();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.savedis = true;
            axios.post(this.url + '/statistics/entry/addEntryPerson', this.form).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                if (res.data.data == 'success') {
                  this.savedis = false;
                  this.$emit('getlist')
                }
                if (res.data.data == '存在此人信息') {
                  this.savedis = false;
                  this.errorinfo = res.data.data;
                  document.documentElement.style.overflow = 'hidden';
                  this.errordialogVisible = true;
                }
              }
            })
          }
        })
      },
      cancel(formName) {
        this.savedis = false;
        this.$refs[formName].resetFields();
        this.$emit("getlist");
      },
      test() {
        if(this.form.name !== null){
          var namearr = [];
          for (var i = 0; i < this.options.length; i++) {
            namearr.push(this.options[i].name)
          }
          if (namearr.indexOf(this.form.name) == -1) {
            this.options.push({name: this.form.name, id: ''});
          }
          var id = '';
          for (var i = 0; i < this.options.length; i++) {
            if (this.form.name == this.options[i].name) {
              id = this.options[i].id
            }
          }
          if(id !== ''){
            axios.post(this.url + '/statistics/entry/getResumeDetail', {
              id: id
            }).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                  this.form.customer = res.data.data.customer_name;
                  this.form.phone = res.data.data.phone;
                  this.form.level = res.data.data.post_level;
                  this.form.position = res.data.data.post_name;
                  this.form.entryTime = res.data.data.entry_time;
                  this.form.admissionTime = res.data.data.scene_time;
                  this.form.sex = res.data.data.sex;
                  this.postHandler1();
                  this.postNameChange1();
              }
            })
          }else{
            this.form.phone = '';
            this.form.level = '';
            this.form.position = '';
            this.form.entryTime = '';
            this.form.admissionTime = '';
            this.form.sex = '';
            this.levellist = [];
          }
        }
      },
      //清除所有的校验信息
      resetFields(formName) {
        this.$refs[formName].resetFields();
      },
      errorinfoClose() {
        this.errorinfo = null;
        document.documentElement.style.overflow = 'auto';
        this.errordialogVisible = false;
      },
    }
  }
</script>

<style scoped>
  .save {
    width: 150px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    border-radius: 4px;
    margin-right: 43px;
    background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
  }
  
  
  .addform {
    color: #333 !important;
  }
  
  .save.is-disabled {
    color: #C0C4CC;
    cursor: not-allowed;
    background-image: none;
    background-color: #FFF;
    border-color: #EBEEF5;
  }
  
  .canceL {
    width: 150px;
    height: 40px;
    border: 1px solid #4e6ef5;
    font-size: 16px;
    font-weight: 500;
    color: #4e6ef5;
  }
</style>
